<template>
  <div class="chart" ref="chart" style="height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BarCharts',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    data () {
      this.draw()
    }
  },
  methods: {
    draw () {
      this.chart.clear()
      const Xdata = []
      const data = []
      const colors = []
      const lineData = []
      let total = 0
      this.data.forEach((item) => {
        Xdata.push(item.title)
        data.push({
          value: item.num,
          itemStyle: {
            color: item.color
          }
        })
        total += item.num
        colors.push(item.color)
      })
      this.data.forEach((item) => {
        lineData.push((item.num / total * 100).toFixed(2))
      })
      const option = {
        color: colors,
        grid: {
          top: 40,
          left: 6,
          right: 6,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        xAxis: {
          data: Xdata,
          axisLine: {
            show: false // 隐藏X轴轴线
          },
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 30,
            textStyle: {
              color: '#595959' // X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '个',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#BFBFBF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#BFBFBF']
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: 'value',
            name: '%',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#BFBFBF'
              }
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '个数',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 12,
            data: data
          },
          {
            name: '占比',
            type: 'line',
            yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, // 平滑曲线显示
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 10, // 标记的大小
            lineStyle: {
              color: 'rgba(233, 186, 21, 1'
            },
            data: lineData
          }
        ]
      }
      this.chart.setOption(option)
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.data.length && this.draw()
  },
  beforeDestroy () {
    echarts.dispose(this.chart)
    this.chart = null
  }
}
</script>
